<!DOCTYPE html>

<htm>
    <head>
        <meta charset="UTF-8">
        <title>作用域插槽</title>
        <style type="text/css">
            .counter { 
                margin: 15px auto;
                border: 1px solid blue;
                width: 80vw;
            }
            .handler {
                margin: 15px;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>

        <div id="root"></div>

         <!-- 导入 vue.js 3.x 核心库 -->
         <script src="../scripts/vue@3.2.31.js"></script>

         <script>

            const HandleButton = {
                name: 'HandleButton',
                template: `<div class="handler">
                                <slot :message="info"></slot>
                                <hr>
                                <button @click="increase">增加</button>
                           </div>`,
                data(){
                    return { info: '点击次数: ' }
                },
                methods: {
                    increase(){
                        let rand = ( Math.random() * 10 ) | 0 ;
                        this.$emit( '增加' , { increment: rand } );
                    }
                }
            }

            const CounterView = {
                name: 'CounterView',
                // 注册子组件(局部注册)
                components: {
                    'handle-button': HandleButton
                },
                template: `<div class="counter">
                                <handle-button @增加="handler">
                                    <template v-slot:default="props">
                                        {{ props.message }}<b>{{ value }}</b>
                                    </template>
                                </handle-button>
                                <handle-button @增加="handler">
                                    <template v-slot:default="props">
                                        {{ props.message }}<b>{{ value }}</b>
                                    </template>
                                </handle-button>
                                <handle-button @增加="handler">
                                    <template v-slot:default="props">
                                        {{ props.message }}<b>{{ value }}</b>
                                    </template>
                                </handle-button>
                           </div>`,
                data(){
                    return { value: 1 , message: '' }
                },
                methods: {
                    handler( payload ){
                        if( payload && payload.increment ){
                            console.log('接受到子组件通过事件传递的数据: ' , payload );
                            this.value += payload.increment;
                            return;
                        }
                        this.value++;
                    }
                }
            }

            const options = {
                // 注册子组件(局部注册)
                components: {
                    'counter-view': CounterView
                },
                template: `<counter-view></counter-view>`
            }
            Vue.createApp(options).mount('#root');

         </script>
        
    </body>
</html>